<template>
  <div class="photo-wall">
    <div class="photo-wall-wrapper">
      <Waterfall
        :lazyload="false"
        :breakpoints="breakpoints"
        :gutter="gutter"
        :list="userList"
        :column-count="3"
      >
        <template #item="{ item }">
          <figure class="photo-card">
            <div class="photo-frame">
              <LazyImg class="photo-img" :url="item.photoUrl" />
            </div>
          </figure>
        </template>
      </Waterfall>
    </div>
  </div>
</template>

<script setup>
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
import { useUserStore } from "@/store/modules/user";
import { defineProps, onMounted, ref } from "vue";
import { personphotos } from "@/api/business/egg";
import "vue-waterfall-plugin-next/dist/style.css";

const emits = defineEmits(["fPhotos"]);
const userStore = useUserStore();
const userId = ref();
const userList = ref([]);
const loading = ref(true);
const gutter = ref(Math.round(window.innerWidth * 0.008));

const breakpoints = ref({
  3000: { rowPerView: 8 },
  1800: { rowPerView: 6 },
  1200: { rowPerView: 4 },
  500: { rowPerView: 2 },
});

function getList() {
  loading.value = true;
  personphotos({ userId: userId.value }).then((res) => {
    loading.value = false;
    userList.value = res.rows;
    emitPhotos();
  });
}

function emitPhotos() {
  emits("fPhotos", userList.value);
}

const props = defineProps({
  userId: {
    type: String,
    required: true,
    default: "",
  },
});

onMounted(() => {
  userId.value = props.userId;
  getList();
});
</script>

<style lang="scss" scoped>
.photo-wall {
  width: calc(100% + 2rem); /* 比父窗口多 2rem */
  margin: 2vh -1rem;
}

.photo-wall-wrapper {
  width: 100%;
}

.photo-card {
  margin: 0;
  border-radius: 0.4vw;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.photo-frame {
  width: 100%;
  font-size: 0;
  :deep(.photo-img) {
    width: 100%;
    border-radius: 0.4vw;
    display: block;
  }
}
</style>
